<template>
  <div class="history" v-if="list">
    <!-- 搜索条件 -->
    <el-form :inline="true" :model="historySearch" class="demo-form-inline">
      <el-form-item label="诊断时间:">
        <!-- <el-date-picker
          v-model="historySearch.dataTime"
          :picker-options="pickerBeginDateBefore"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :clearable="false"
        ></el-date-picker> -->
        <el-date-picker
          v-model="historySearch.dataTime"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerBeginDateBefore"
          value-format="yyyy-MM-dd"
          :clearable="false"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" class="btnSizeStyle">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      max-height="300"
      highlight-current-row
      stripe
      border
      v-loading="tableLoad"
    >
      <!-- 提示语句 -->
      <template slot="empty">{{ tableMessage }}</template>
      <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
      <el-table-column label="问题类型" width="220" :show-overflow-tooltip="true">设备本体问题/摄像机图像质量问题 </el-table-column>
      <el-table-column label="问题描述" min-width="290">
        <!-- 图像虚焦、图像雪花、图像模糊 -->
        <template slot-scope="scope"><span v-html="getProblem(scope.row)"></span></template>
      </el-table-column>
      <el-table-column prop="time" label="诊断时间" sortable width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.createDate.time | dateFormat }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="wtscsj" label="诊断结果" sortable min-width="150">
        <template slot-scope="scope">图像异常</template>
      </el-table-column> -->
      <el-table-column prop="image" label="图片" width="80">
        <template slot-scope="scope">
          <el-image class="table_cell_image" :src="scope.row.image" :preview-src-list="[scope.row.image]" @click="handleClickItem">
            <div slot="error">
              <img style="width: 100%" :src="scope.row.image" alt />
            </div>
          </el-image>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-row class="page-row">
      <el-col :span="12"></el-col>
      <el-col :span="12" style="height: 47px; display: table">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="totalCount"
        ></el-pagination>
        <!-- <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total,prev, pager, next, jumper"
          :total="totalCount"
        ></el-pagination>-->
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { fun_date } from '@/assets/js/videoTab.js'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
import { getImages } from '@/assets/js/getImage.js'
export default {
  props: ['dataList'],
  data() {
    return {
      historySearch: { dataTime: '' },
      tableData: [],
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      list: {},
      currentPage: 1,
      totalCount: 0,
      pageSize: 10,
      tableMessage: '',
      tableLoad: false, // 表格加载中样式
      tableTimer: null,
      listQuery: {
        sortby: '',
        order: '',
      },
    }
  },
  watch: {
    dataList: {
      deep: true,
      handler(newVal, oldVal) {
        this.list = newVal
      },
    },
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          // this.totalCount = 0
          this.tableData = []
          this.tableMessage = tableMessageText
        }
      }, timeLoad)
    },
  },
  created() {
    this.list = this.dataList
  },
  mounted() {
    this.historyChild()
  },
  methods: {
    // 排序
    sortthiscolumn(column) {
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'DESC' // 降序
      } else if (column.order === 'ascending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'ASC' // 升序
      } else {
        this.listQuery.sortby = ''
        this.listQuery.order = '' // 没有排序
      }
      this.getHistoryDate(this.currentPage, this.pageSize)
    },
    getProblem(row) {
      let html = ''
      const list = [
        { type: row.brightnessException, name: '亮度异常 ' },
        { type: row.captureBlocking, name: '块效应异常 ' },
        { type: row.captureLose, name: '信号丢失异常 ' },
        { type: row.colorException, name: ' 偏色 ' },
        { type: row.contrast, name: '低对比度异常 ' },
        { type: row.freeze, name: '冻结异常 ' },
        { type: row.horizontalStripe, name: '水平条纹异常 ' },
        { type: row.obscure, name: '虚焦异常 ' },
        { type: row.partialOcclusion, name: '半遮挡异常 ' },
        { type: row.totalOcclusion, name: '全遮挡异常 ' },
        { type: row.snowFlake, name: '雪花异常 ' },
        { type: row.turnRound, name: '转向比度异常 ' },
      ]
      const newList = []
      list.forEach((item) => {
        if (item.type > 0) {
          newList.push(item.name)
        }
      })
      if (newList.length > 0) {
        html = `<span style="color:#f56c6c">${newList.join('、')}</span>`
      } else {
        html = '图像正常'
      }
      return html
    },
    onSubmit() {
      if (this.historySearch.dataTime === '') {
        this.$message.error('请输入巡检时间')
        return
      }
      this.currentPage = 1
      this.pageSize = 10
      this.getHistoryDate(this.currentPage, this.pageSize)
    },
    // 选择每页显示多少条数据
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getHistoryDate(this.currentPage, val)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getHistoryDate(val, this.pageSize)
    },
    // 录像巡检历史
    historyChild(type) {
      this.$on('childMethod', (res) => {
        this.currentPage = res.currentPage
        this.pageSize = res.pageSize
        this.historySearch.dataTime = ''
        this.getHistoryDate(res.currentPage, res.pageSize)
      })
    },
    async getHistoryDate(page, size) {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      let startDate
      let endDate
      const time = fun_date(-5)
      if (this.historySearch.dataTime === '') {
        startDate = time.otherTime
        endDate = time.currentTime
        // this.historySearch.dataTime = ''
        this.historySearch.dataTime = [time.otherTime, time.currentTime]
      } else {
        startDate = this.historySearch.dataTime[0]
        endDate = this.historySearch.dataTime[1]
      }
      params.append('order', this.listQuery.sortby) // 排序字段
      params.append('sort', this.listQuery.order) // DESC降序 ASC升序
      params.append('assetsId', this.list.sbid)
      params.append('page', page) // 页数
      params.append('size', size) // 条数
      params.append('startDate', startDate + ' 00:00:00')
      params.append('endDate', endDate + ' 23:59:59')
      const { data: res } = await this.$http.post('camStatus/quality/find', params)
      this.tableLoad = false
      switch (res.code) {
        case '0000':
          this.totalCount = res.totalCount
          this.tableData = getImages(res.data, 'image')
          break
        default:
          this.totalCount = 0
          this.tableData = []
          this.tableMessage = res.message
          break
      }
    },
    // 点击蒙版关闭图片
    handleClickItem() {
      this.$nextTick(() => {
        const domImageMask = document.querySelector('.el-image-viewer__mask') // 获取遮罩层dom
        if (!domImageMask) {
          return
        }
        domImageMask.addEventListener('click', () => {
          // 点击遮罩层时调用关闭按钮的 click 事件
          document.querySelector('.el-image-viewer__close').click()
        })
      })
    },
  },
}
</script>
<style lang="scss" scoped>
$c039D12: #039d12;
$cF56C6C: #f56c6c;
@import '@/assets/scss/xjzxCommon.scss';
div.history {
  border-left: 0;
  margin-left: 0;
  padding: 15px 0 15px;
  .el-form-item {
    margin-bottom: 15px;
  }
}
// .el-dialog__footer {
//   padding-top: 0;
// }
.f_039D12 {
  color: $c039D12;
}
.f_F56C6C {
  color: $cF56C6C;
}
</style>
